<template>
  <div style="padding: 0.2rem">
    <div class="title1">
      <label>请输入商品名称：</label>
      <el-input v-model="commodity_name" placeholder="请输入商品名称" /><span
        >&nbsp;&nbsp;&nbsp;</span
      >
      <label>请输入商品类型：</label>
      <el-input v-model="commodity_type" placeholder="请输入商品类型" /><span
        >&nbsp;&nbsp;&nbsp;</span
      >
      <div style="margin-top: 0.2rem">
        <label>请输入商品积分：</label>
        <el-input
          v-model="max_commodity_jifen"
          style="width: 240px"
          placeholder="请输入最大积分"
        /><span style="color: black">&nbsp;-&nbsp;</span>
        <el-input
          v-model="small_commodity_jifen"
          style="width: 240px"
          placeholder="请输入最小积分"
        />
      </div>
      <br />
      <div class="buttom">
        <el-button type="primary" @click="getcommodity()">搜索</el-button>
        <el-button type="primary" @click="clear()">清空</el-button>
      </div>
    </div>

    <el-table :data="show_list" style="width: 100%; box-shadow: 0 0 0.05rem #ccc; color: black">
      <el-table-column fixed prop="_id" label="商品编号" width="210" />
      <el-table-column prop="commodity_guige" label="商品规格" width="100">
        <template v-slot="scope">
          <span style="color: green">{{ scope.row.commodity_guige }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="commodity_jifen" label="换购积分" width="120" />
      <el-table-column prop="commodity_pinpai" label="商品品牌" width="150">
        <template v-slot="scope">
          <span style="color: green">{{ scope.row.commodity_pinpai }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="commodity_name" label="商品名称" width="200" />
      <el-table-column prop="commodity_xingzhi" label="商品性质" width="120" />
      <el-table-column prop="commodity_diqu" label="商品地区" width="120" />

      <!-- <el-table-column prop="commodity_xinxi" label="商品信息" width="120" /> -->
      <el-table-column prop="commodity_img1" label="商品展示图1" width="120">
        <template v-slot="scope">
          <img :src="scope.row.commodity_img1" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="commodity_img2" label="商品展示图2" width="120">
        <template v-slot="scope">
          <img :src="scope.row.commodity_img2" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="commodity_img3" label="商品展示图3" width="120">
        <template v-slot="scope">
          <img :src="scope.row.commodity_img3" width="100" />
        </template>
      </el-table-column>
      <el-table-column prop="commodity_img4" label="商品展示图4" width="120">
        <template v-slot="scope">
          <img :src="scope.row.commodity_img4" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="commodity_type" label="商品类型" width="120" />
      <el-table-column prop="commodity_number" label="商品库存" width="120" />
      <el-table-column prop="commodity_istrue" label="是否可以积分兑换" width="120">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.commodity_istrue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="updata_commodity_istrue(scope.row._id)"
          />
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row._id)">
            修改</el-button
          >
          <el-button link type="primary" size="small" @click="del_shangpin_item(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[4, 6, 8, 12]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
    
  <script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { get_Integral, updata_commodityistrue, del_shangpin } from '@/request/api/api.ts'
const router = useRouter()

const tableData = ref([])
const commodity_name = ref('')
const commodity_type = ref('')
const max_commodity_jifen = ref('')
const small_commodity_jifen = ref('')

onMounted(() => {
  getcommodity()
})
// 获取商品列表
const getcommodity = async () => {
  const data: any = await get_Integral({
    commodity_name: commodity_name.value,
    commodity_type: commodity_type.value,
    max_commodity_jifen: max_commodity_jifen.value,
    small_commodity_jifen: small_commodity_jifen.value
  })
  tableData.value = data.data
}
// 清空搜索框
const clear = () => {
  ;(commodity_name.value = ''),
    (commodity_type.value = ''),
    (max_commodity_jifen.value = ''),
    (small_commodity_jifen.value = '')
}
// 改变商品是否可以被积分兑换
const updata_commodity_istrue = async (item) => {
  let data = await updata_commodityistrue({ _id: item })
  if (data.code == 200) {
    ElMessage({
      message: `${data.msg}`,
      type: 'success',
      plain: true
    })
    getcommodity()
  }
}

const currentPage4 = ref(1)
const pageSize4 = ref(4)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const show_list = computed(() => {
  return tableData.value.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  )
})

const handleSizeChange = (val: number) => {
  pageSize4.value = val
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  currentPage4.value = val
  // console.log(`current page: ${val}`)
}

// 删除商品
const del_shangpin_item = async (item) => {
  let data = await del_shangpin({ _id: item })
  if (data.code == 200) {
    getcommodity()
  }
}
// 跳转修改页面
const handleClick = (item) => {
  router.push(`/xxk/updata_commodity?_id=${item}`)
}
</script>
  
<style lang="scss" scoped>
.title1 {
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 0.2rem;
}
.demo-pagination-block {
  padding: 0.1rem;
  margin-top: 0.2rem;
  float: right;
}
.title1 .el-input {
  width: 200px;
  height: 40px;
}
.buttom .el-button {
  width: 80px;
  height: 30px;
}
.el-table .el-table-column {
  color: black;
  font-size: 30px;
}
</style>